<template>
    <div>
        <el-upload
            action="/api/upload/image"
            list-type="picture-card"
            :file-list="fileList"
            :limit="5"
            :on-success="onSuccess"
            :headers="headers"
            :on-remove="handleRemove">
            <el-icon><Plus /></el-icon>
        </el-upload>
    </div>
</template>
<script>
import { Plus } from '@element-plus/icons-vue'
export default {
    name:"uploadImages",
    components:{Plus},
    props:{
        modelValue:{}
    },
    data(){
        return {
            disabled: false,
            headers:{
                token:localStorage.getItem("token")
            },
            fileList:[]
        };
    },
    created(){
        this.fileList = this.modelValue.lenngth>0?[{url:localStorage.getItem("url")+this.modelValue}]:[]
    },
    watch:{
        modelValue(val){
            if (!val) {
                //清空
                this.fileList = []
            }
        }
    },
    methods:{
        handleRemove(file) {
            this.$emit("update:modelValue",'')
        },
        onSuccess(res, file, fileList){
            if (res.code == 200) {
                this.$emit("update:modelValue",res.data)
            }
        }
    }
}
</script>